<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>详情页</title>
  <link rel="stylesheet" href="./css/base.css" />
  <link rel="stylesheet" href="./css/details.css" />
  <link rel="stylesheet" href="./font/iconfont.css" />
</head>

<body>
  <!-- 头部 -->
  <div class="top1"></div>
  <!-- 主体 -->
  <div>
    <div class="box1">
      <a href="">首页</a>>> <a href="">图片款</a>>>
      <span>2022-02-28-10112</span>
    </div>
    <div class="section">
      <div class="section-left">
        <div id="left" class="lefte">
          <img src="" alt="" />
          <div class="mask"></div>
        </div>
        <div id="right">
          <img src="" id="imgListR" alt="" />
        </div>
        <div style="clear: both"></div>
        <div class="box4">
          <ul class="xiaoTuList"></ul>
        </div>
        <div class="btn1"><img src="./images/btn4_prev.png" alt="" /></div>
        <div class="btn2"><img src="./images/btn4_next.png" alt="" /></div>
      </div>
    </div>
    <div class="section-right">
      <div class="name">
        <h3 class="title"></h3>
        <p class="time">shijian</p>
        <p>类型:图片款</p>
      </div>
      <div>
        <em>价格：人民币</em><span class="price"></span><em>元</em> <br />
        <em>韩币：</em><span class="money"></span><em>元</em>
        <p>代购费:韩币价格x汇率x3%</p>
      </div>
      <div>
        <form action="">
          <table>
            <tr class="color">
              <td>颜色</td>
            </tr>
            <tr>
              <td>尺寸</td>
              <td>S M L XL XXL</td>
            </tr>
            <tr>
              <td>购买数量</td>
              <td>
                <input type="button" id="btn3" value="-" />
                <input type="text" class="fox" value="1" />
                <input type="button" id="btn4" value="+" />
              </td>
            </tr>
            <tr>
              <td>购买备注</td>
              <td><input type="text" value="请注明购买颜色尺寸" /></td>
            </tr>
            <tr class="mn">
              <td></td>
              <td class="m1">
                <a id="carAdd">
                  <p class="car2">加入购物车</p>
                </a>
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>

    <div class="section1">
      <div class="section1-left">
        <h6>相关商品</h6>
        <div>
          <img src="./images/img12.jpg" alt="" />
          <a href="">220525-0388</a>
          <p>￥148.63</p>
        </div>
        <div>
          <img src="./images/img12.jpg" alt="" />
          <a href="">220525-0388</a>
          <p>￥148.63</p>
        </div>
        <div>
          <img src="./images/img12.jpg" alt="" />
          <a href="">220525-0388</a>
          <p>￥148.63</p>
        </div>
        <div>
          <img src="./images/img12.jpg" alt="" />
          <a href="">220525-0388</a>
          <p>￥148.63</p>
        </div>
        <div>
          <img src="./images/img12.jpg" alt="" />
          <a href="">220525-0388</a>
          <p>￥148.63</p>
        </div>
        <div>
          <img src="./images/img12.jpg" alt="" />
          <a href="">220525-0388</a>
          <p>￥148.63</p>
        </div>
      </div>
      <div class="section1-right">
        <div style="width: 900px; height: 50px; font-size: 20px">
          商品详情
        </div>
        <p>1.关于商品</p>
        <p>
          商品均来自东大门服装批发档口实拍。经仔细检查后发货，绝不存在质量问题。商品标价均为东大门批发档口的真实批发价格。请放心购买。
        </p>
        <p>2.批发与尺码</p>
        <p>
          除个别商家规定必须同款3件起批,一般情况下同一款衣服2件即可拿货,不同颜色和尺码数可以混拿。所有商品附带原始购物小票。韩国服装大部分为均码。少数有尺码。具体尺码参照《尺码指南》
        </p>
        <p>3.物流发货？</p>
        <p>
          下单之后,备货时间需要1-3天,因为也许您订的一些货，不能当天就有现货，需要预定，等隔天，或者是两天后才能出货,
          所以这个需要一些时间，一般三天之后，如果遇到韩国反馈缺货的，我们会及时通知您。您可以选择退款缺货款式或者再定新款。
          具体物流参照《物流指南》
        </p>
        <p>4.如何支付</p>
        <p>
          必须全额付款，货款压的太多，没法周转，希望您能理解，所以货款必须直接到账。物流费用需得到货物重量通知后再支付。
        </p>
        <p>
          注：东大门每周六晚上休息，但是网站可以正常下单。我们会在周日为您采购。
        </p>
      </div>
    </div>
  </div>
  <!-- 尾部 -->
  <div class="bottom1" style="margin-top: 1500px"></div>
  <script src="./libs/jquery.js"></script>
  <script src="./libs/jquery.cookie.js"></script>

  <script>
    var obtn1 = document.querySelector(".btn1");
    var obtn2 = document.querySelector(".btn2");
    var imgListL = document.getElementById("imgListL");
    var xiaoTuList = document.querySelector(".xiaoTuList");

    var fox = document.querySelector(".fox");
    var obtn4 = document.querySelector("#btn4");
    var obtn3 = document.querySelector("#btn3");
    var carAdd = document.querySelector("#carAdd");

    obtn4.onclick = function () {
      fox.value++;
      console.log(fox.value);
    };
    obtn3.onclick = function () {
      if (fox.value == 1) {
        fox.value = 1;
      } else {
        fox.value--;
      }
    };
    console.log(fox.value);
    //   2
    const idCar = location.search.split("=")[1];
    //绑定事件
    carAdd.onclick = function () {

      const goods = $.cookie("goods") ? JSON.parse($.cookie("goods")) : [];


      let i = 0;
      const flag = goods.some((val, idx) => {
        i = idx;
        return val.id === idCar;
      });
      if (flag) {
        // 是重复，增加数量
        goods[i].num = fox.value; //4
        // goods[i].price=
      } else {
        // 不是重复，push添加
        goods.push({
          id: idCar,
          num: fox.value,
          flag: true,
          price: $('.price').html(),
          name:$(".title").html(),
          img:$(".lefte").children("img").attr("src")
        });
      }
      //将处理之后的数据，存入本地存储
      $.cookie("goods", JSON.stringify(goods));
    };

    // 当鼠标移动到小图时,添加样式和设置当前选中的图片
    // 这里用到了 事件委托
    xiaoTuList.onmouseover = function (ev) {
      var e = ev || window.event;
      var targ = e.target || window.srcElement;
      if (targ.nodeName.toLowerCase() == "img") {
        targ.className = "Style";
        imgListL.src = targ.src;
        imgListR.src = targ.src;
      }
    };
    // 当鼠标离开小图时,删除添加样式
    xiaoTuList.onmouseout = function (ev) {
      var e = ev || window.event;
      var targ = e.target || window.srcElement;
      if (targ.nodeName.toLowerCase() == "img") {
        targ.className = "";
      }
    };
  </script>
</body>
<!-- <script src="./libs/jquery.js"></script> -->
<script>
  $(".top1").load("http://localhost:3000/html/public.html #top");
  $(".bottom1").load("http://localhost:3000/html/public.html #footer");
</script>
<script>
  //  let arr = [];
  // console.log(location.search.split("=")[1]);
  const id = location.search.split("=")[1];
  $.ajax({
    url: "http://localhost:3000/api",
    data: {
      type: "getGoods",
    },
    success: (res) => {
      res = JSON.parse(res).data;
      //    console.log(res)
      let i = 0;
      const flag = res.some((val, index) => {
        i = index;
        // arr.push(val)
        return val.imgId === id;
      });
      if (flag) {
        render(res[i]);
      }
    },
  });

  function render(data) {
    $(".lefte").children("img").attr("src", data.img);
    $("#right").children("img").attr("src", data.img);
    // 图片列表
    let str = "";
    data.imgs.forEach((val) => {
      str += `<li><img src="${val.small}"></li>`;
    });
    $(".box4").children("ul").html(str);
    //图片名称
    $(".title").html(data.name);
    //图片时间
    $(".time").html(data.imgtime);
    //价格
    $(".price").html(data.price);
    $(".money").html(data.money);
    //颜色
    data.colors.forEach((val) => {
      $(".color").append(
        $(
          `<td class="color-black" style="background:${val.color}">${val.title}</td>`
        )
      );
    });
  }

  // 当页面加载的时候
  window.onload = function () {
    // 获取节点
    var divLeft = document.getElementById("left");
    var divRight = document.getElementById("right");
    var mask = document.querySelector(".mask");
    var imgListR = document.getElementById("imgListR");

    // 获取右边块与右边大图的比例
    var mW = divRight.offsetWidth / imgListR.offsetWidth;
    var mH = divRight.offsetHeight / imgListR.offsetHeight;

    // 将左边块的大小乘以比例,求出小块的大小
    var mnW = divLeft.offsetWidth * mW;
    var mnH = divLeft.offsetHeight * mH;

    // 设置小块的大小
    mask.style.width = mnW + "px";
    mask.style.height = mnH + "px";

    // 当在左边块内移动的时候
    divLeft.onmousemove = function (e) {
      // 获取鼠标位置
      var left = 0;
      var top = 0;
      if (e.target.className === "mask") {
        left = e.offsetX + e.target.offsetLeft;
        top = e.offsetY + e.target.offsetTop;
      } else {
        left = e.offsetX;
        top = e.offsetY;
      }

      // 设置鼠标移动的时候,鼠标指针会处于在小块中间
      left = left - mask.offsetWidth / 2;
      top = top - mask.offsetHeight / 2;

      // 设置小块不能移出左边大块,设置最大可移动的宽度值和最高高度值
      var maskMaxL = divLeft.offsetWidth - mask.offsetWidth;
      var maskMaxT = divLeft.offsetHeight - mask.offsetHeight;
      // console.log(maskMaxL)
      // console.log(maskMaxT)
      if (left < 0) {
        left = 0;
      } else if (left > maskMaxL) {
        left = maskMaxL;
      }
      if (top < 0) {
        top = 0;
      } else if (top > maskMaxT) {
        top = maskMaxT;
      }
      // 设置移动时小块的移动位置
      mask.style.left = left + "px";
      mask.style.top = top + "px";

      // 设置右边大图移动位置
      var rightImgL = (-left / divRight.offsetWidth) * 1.5 * 100 + "%";
      var rightImgT = (-top / divRight.offsetHeight) * 1.5 * 100 + "%";

      // 设置右边大图的动画
      imgListR.style.transform =
        "translate(" + rightImgL + "," + rightImgT + ")";
    };

    // 鼠标移动进入左边图片时小块和右边图片显示
    divLeft.onmouseenter = function () {
      (mask.style.display = "block"), (divRight.style.display = "block");
    };
    // 鼠标移动离开左边图片时小块和右边图片隐藏
    divLeft.onmouseleave = function () {
      (mask.style.display = "none"), (divRight.style.display = "none");
    };

    // 刚进入网页时,左边div块里面小块隐藏
    (mask.style.display = "none"),
      // 刚打开网页时,让选中添加的样式隐藏
      (divRight.style.display = "none");
  };

  var index = 0;
  var liLen;
  $(".btn1").click(function () {
    liLen = $(".xiaoTuList").length;
    if (index == 0) {
      $(".xiaoTuList").stop();
      // alert("最后一张")
    } else {
      index--;
      if (index <= 3) {
        $(".xiaoTuList").animate({ left: -index * 90 }, 500);
      } else {
        $(".xiaoTuList").stop();
      }
    }
  });

  $(".btn2").click(function () {
    if (index == 5) {
      $(".xiaoTuList").stop();

      // alert("这是第一页")
    } else {
      index++;
      if (index >= 4) {
        $(".xiaoTuList").stop();
      } else {
        $(".xiaoTuList").animate({ left: -index * 90 }, 500);
      }
    }
    console.log(index);
  });

  
</script>
<script>
	if (localStorage.getItem("token")) {
		let user = `<a href="">${localStorage.username}</a>`;
		// console.log(user)
		$('.user').html(user)
		let exit = '`<a href="" id="exit">退出</a>`'
		$('.exit').html(exit)
		$('#exit').click(function () {
			localStorage.clear();
			location.href = 'index.html'
		})
	}
	$('.car2').click(function () {
		if (!localStorage.getItem("token")) {
			alert("没有登陆，去登录")
			location.assign("http://localhost:3000/login.html")
			// location.href = './login.html'
		}
		else {
			location.assign("http://localhost:3000/cart.html")
		}
	})
</script>
</html>


